import { Meta, Story, Canvas, Props } from "@storybook/addon-docs";
import { withKnobs } from "@storybook/addon-knobs";
import { action } from '@storybook/addon-actions';
import { ViewPort, BottomResizable, TopResizable, RightResizable, LeftResizable } from "../../";
import { green, description, lorem } from "../Utils";
import { CommonHeader, PropsTable, StandardProps, AnchoredProps, ResizableProps } from "../Utils";

<CommonHeader />

<Meta title="Components/Resizable/By percentage" component={BottomResizable} />

## Resizable

Anchored resizable spaces by percentage size.

### Bottom resizable

<Canvas>
	<Story name="Bottom">
		<ViewPort>
			<BottomResizable style={green} size="50%" touchHandleSize={20} trackSize={true} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
				{description("Bottom resizable")}
			</BottomResizable>
		</ViewPort>
	</Story>
</Canvas>

### Top resizable

<Canvas>
	<Story name="Top">
		<ViewPort>
			<TopResizable style={green} size="50%" touchHandleSize={20} trackSize={true} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
				{description("Top resizable")}
			</TopResizable>
		</ViewPort>
	</Story>
</Canvas>

### Left resizable

<Canvas>
	<Story name="Left">
		<ViewPort>
			<LeftResizable style={green} size="50%" touchHandleSize={20} trackSize={true} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
				{description("Left resizable")}
			</LeftResizable>
		</ViewPort>
	</Story>
</Canvas>

### Right resizable

<Canvas>
	<Story name="Right">
		<ViewPort>
			<RightResizable style={green} size="50%" touchHandleSize={20} trackSize={true} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
				{description("Right resizable")}
			</RightResizable>
		</ViewPort>
	</Story>
</Canvas>

### Properties

<Story name="Properties">
	<PropsTable>
		<ResizableProps />
		<AnchoredProps />
		<StandardProps />
	</PropsTable>
</Story>
